// import React from 'react'
import React, { Component } from 'react'

import { Switch, Route, Redirect } from 'react-router-dom'

import MyNavLink from '../componments//MyNavLink.jsx'

import About from '../views/About.jsx'
import Home from '../views/Home.jsx'

import '../App.css'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header classNameName="site-header jumbotron">
          <div className="container">
            <div className="row">
              <div className="col-xs-12">
                <h1>React Router Demo</h1>
              </div>
            </div>
            <div className="row">
              <div className="col-xs-2 col-xs-offset-2">
                <div className="list-group">
                  {/* <NavLink className="list-group-item" to="/about">
                    About
                  </NavLink>
                  <NavLink className="list-group-item" to="/home">
                    Home
                  </NavLink> */}
                  <MyNavLink className="list-group-item" to="/about">
                    About
                  </MyNavLink>
                  <MyNavLink className="list-group-item" to="/home">
                    Home
                  </MyNavLink>
                </div>
              </div>
              <div className="col-xs-6">
                <div className="panel">
                  <div className="panel-body">
                    <Switch>
                      <Route path="/about" component={About}></Route>
                      <Route path="/home" component={Home}></Route>
                      <Redirect to="/about"></Redirect>
                    </Switch>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>
      </div>
    )
  }
}
// function App() {}

export default App
